@use '../variables';

$block: '.#{variables.$ns}dropdown-menu';

#{$block} {
    &__switcher-wrapper {
        display: inline-block;
    }

    &__switcher-button {
        display: flex;
    }

    &__menu-item_separator {
        border-block-start: 1px solid var(--g-color-line-generic-solid);
        margin: 0.5em 0;
        pointer-events: none;
    }

    &__sub-menu-arrow {
        inset-inline-end: -4px;
        position: relative;
    }

    &__sub-menu {
        position: relative;

        #{$block}__menu {
            &:before,
            &:after {
                position: absolute;

                inset-block-start: 0;

                width: 10px;
                height: 100%;

                content: '';
            }

            &:before {
                inset-inline-start: -10px;
            }

            &:after {
                inset-inline-end: -10px;
            }
        }
    }

    &__popup-content {
        & > :first-child {
            border-start-start-radius: inherit;
            border-start-end-radius: inherit;
        }

        & > :last-child {
            border-end-start-radius: inherit;
            border-end-end-radius: inherit;
        }
    }
}
